<template>
  <div class="myMusic">
    <div class="Breadcrumbback">
      <Breadcrumb></Breadcrumb>
    </div>
    <!-- @select="handleSelect" -->
    <el-menu
      :default-active="onRoutes"
      class="el-menu-demo"
      mode="horizontal"
      text-color="#000"
      active-text-color="#A1322C"
      router
    >
      <template v-for="item in navData">
        <!-- @click="getTree(item.children)" -->
        <el-menu-item
          :index="isMobile ? item.mUrl : item.url"
          :key="item.menuId"
        >
          <span
            v-text="$i18n.locale === 'zh' ? item.menuCname : item.menuName"
          ></span>
        </el-menu-item>
      </template>
    </el-menu>
    <router-view />
  </div>
</template>

<script>
import Breadcrumb from "@/components/common/Breadcrumb/Index";
export default {
  data() {
    return {
      navData: [
        {
          menuId: "8",
          menuCname: "我喜欢",
          menuName: "Like",
          url: "/myMusic/like",
          mUrl: "/myMusic/like",
          children: [
            // {
            //   menuId: "8-1",
            //   menuCname: "单曲",
            //   menuName: "Single",
            //   url: "/myMusic/like/single",
            // },
            // {
            //   menuId: "8-2",
            //   menuCname: "专辑",
            //   menuName: "Album",
            //   url: "/myMusic/like/album",
            // },
            // {
            //   menuId: "8-3",
            //   menuCname: "歌单",
            //   menuName: "SongList",
            //   url: "/myMusic/like/song-list",
            // },
            // {
            //   menuId: "8-4",
            //   menuCname: "视频",
            //   menuName: "Video",
            //   url: "/myMusic/like/video",
            // },
          ],
        },
        {
          menuId: "9",
          menuCname: "单曲夹",
          menuName: "SingleDir",
          url: "/myMusic/single-dir",
          mUrl: "/myMusic/m-single-dir",
          children: [],
        },
        {
          menuId: "10",
          menuCname: "唱片夹",
          menuName: "RecordDir",
          url: "/myMusic/record-dir",
          mUrl: "/myMusic/m-record-dir",
          children: [],
        },
      ], //导航栏信息
    };
  },
  components: {
    Breadcrumb,
  },
  computed: {
    onRoutes() {
      let active = this.$route.meta.active;
      return active ? active : this.$route.path;
    },
    isMobile() {
      return this.$store.getters.isMobile;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // handleSelect(val) {
    //   console.log(val);
    // },
    //点击导航栏事件
    // getTree(data) {
    //   console.log(data);
    // },
  },
};
</script>

<style lang="scss" scoped>
.el-menu-demo {
  margin-bottom: 32px;
}
</style>
